<template>
    <section class="flex flex-1 cc flex-wrap bg-[#0f172a] overflow-hidden" style="height: calc(100vh - 50px);">
        <el-image fit="cover" :src="Visual" class="w-full absolute z-0" style="height: calc(100vh - 50px);" />
        <div class="animate__animated animate__slideInLeft flex flex-1 flex-col cc">
            <p class="text-white text-[1.5em] z-10">近一个月营业情况</p>
            <bar-with-background :dataX="state.barX" :dataY="state.barY" />
        </div>
        <div class="flex flex-2 flex-col cc" style="min-width: 650px;">
            <div class="animate__animated animate__slideInDown flex flex-1 mb-[50px] flex-wrap">
                <div class="card mt-[20px] mr-[50px]" style="transform: skew(-4deg,-2deg);">
                    <div class="number">
                        <p class="absolute top-[-3px] left-[-8px] text-[35px]">￥</p>
                        <count-to class="text-white" :startVal="0" :endVal="state.month" :decimals="0"
                            :duration="2000"></count-to>
                        <div class="text-white text-[25px] flex flex-1 ec">
                            <p class="mr-[5px]">近一个月</p>
                            <count-to class="text-[30px] font-bold text-[#F5F5F5]" :startVal="0" :endVal="state.monthOrders"
                                :decimals="0" :duration="2500"></count-to>
                            <p class="ml-[5px]">单</p>
                        </div>
                    </div>
                </div>
                <div class="card pt-[-30px]">
                    <div class="number">
                        <p class="absolute top-0 left-[0px] text-[45px]">￥</p>
                        <count-to class="text-white font-bold" :startVal="0" :endVal="state.yesterday" :decimals="0"
                            :duration="2000"></count-to>
                        <div class="text-white text-[25px] flex flex-1 ec">
                            <p class="mr-[5px]">昨日</p>
                            <count-to class="text-[30px] font-bold text-[#F5F5F5]" :startVal="0"
                                :endVal="state.yesterdayOrders" :decimals="0" :duration="2500"></count-to>
                            <p class="ml-[5px]">单</p>
                        </div>
                    </div>
                </div>
                <div class="card mt-[20px] ml-[50px]" style="transform: skew(4deg, 2deg);">
                    <div class="number">
                        <p class="absolute top-[-10px] left-[-5px] text-[30px]">￥</p>
                        <count-to class="text-white" :startVal="0" :endVal="state.total" :decimals="0"
                            :duration="2000"></count-to>
                        <div class="text-white text-[25px] flex flex-1 ec">
                            <p class="mr-[5px]">累计</p>
                            <count-to class="text-[30px] font-bold text-[#F5F5F5]" :startVal="0" :endVal="state.totalOrders"
                                :decimals="0" :duration="2500"></count-to>
                            <p class="ml-[5px]">单</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="animate__animated animate__fadeInDown">
                <nightingale-chart v-if="state.circle.length" :data="state.circle" />
                <div v-else style="height:650px"></div>
            </div>
        </div>
        <div class="animate__animated animate__slideInRight flex flex-1 flex-col cc relative h-full">
            <p class="text-white text-[1.5em] mb-10 z-10">近十五日分析</p>
            <stacked-line-chart :dataX="state.lineDataX" :dataY="state.lineDataY" :dataType="state.lineType" />
        </div>
    </section>
</template>

<script lang='ts' setup>
import Visual from "@/assets/img/visual_bg.jpg";
import ProductService from "@/api/ProductService";
import { CountTo } from 'vue3-count-to';
import { dayjs } from "element-plus";

type Nightingale = { name: string; value: string; }
type Nightingale_Source = { name: string; sum: string; }

const state = reactive({
    yesterday: 0,
    month: 0,
    total: 0,
    totalOrders: 0,
    yesterdayOrders: 0,
    monthOrders: 0,

    barX: [],
    barY: [],

    circle: [],

    lineType: [],
    lineDataX: [],
    lineDataY: [],
})

const loadDeal = async () => {
    const [err, res] = await ProductService.loadHomeDeal()
    if (err) return Utils.Modal().msgError(err);
    const { yesterday, month, total, totalOrders, yesterdayOrders, monthOrders } = res?.data || {}
    state.yesterday = yesterday * 1
    state.month = month * 1
    state.total = total * 1
    state.totalOrders = totalOrders * 1
    state.yesterdayOrders = yesterdayOrders * 1
    state.monthOrders = monthOrders * 1
}

const loadChartBar = async () => {
    const [err, res] = await ProductService.loadHomeBar()
    if (err) return Utils.Modal().msgError(err);
    state.barY = res.data || []
    let today = dayjs();
    const result = []
    let day
    for (let i = 1; i <= 30; i++) {
        day = today.subtract(i, 'day').format('MM-DD')
        result.unshift(day)
    }
    state.barX = result as any
}

const loadChartNightingale = async () => {
    const [err, res] = await ProductService.loadHomeNightingale()
    if (err) return Utils.Modal().msgError(err);
    let circle = res.data || []
    circle = circle.reduce((result: Nightingale[], item: Nightingale_Source) =>
        result.push({ name: item.name, value: item.sum }) && result, [])
    state.circle = circle.sort((a: Nightingale, b: Nightingale) => parseFloat(a.value) - parseFloat(b.value))
}

const loadChartLine = async () => {
    const [err, res] = await ProductService.loadHomeLine()
    if (err) return Utils.Modal().msgError(err);
    const { dataX, dataY, dataType } = res.data
    state.lineType = dataType
    state.lineDataX = dataX
    state.lineDataY = dataY
}

loadDeal()
loadChartBar()
loadChartNightingale()
loadChartLine()
</script>

<style lang='scss' scoped>
.card {
    width: 250px;
    height: 150px;
    position: relative;
    user-select: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/* Linear Background by using ::before */
.card::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(315deg, #12c2e9, #c471ed, #f64f59);
    border-radius: 5px;
}

/* countdown number */
.card>.number {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    font-size: 4em;
    display: grid;
    place-items: center;
    background-color: var(--background-color);
    color: #fff;
}

.card:hover {
    transform: scale(1.1);
    box-shadow: 0 0 200px rgba(225, 225, 225, 0.3);
    // transform: rotate(720deg);
}
</style>